<template>
  <div>
    <div class="wzyinterrevolution1">
      <div class="wzyinterrevolution">
        <img src="../assets/img/arrows.png" alt="" @click="gobanck" />
        <a href="">定期转活期</a>
      </div>
    </div>

    <!-- 交易 -->
    <div class="wzyaccount">
      <div class="wzyaccount1">
        <p>交易账户</p>
        <div class="wzyaccount2">
          <p>{{ iccid }}</p>
          <img src="../assets/img/箭头4.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 币种 -->
    <div class="wzykind">
      <div class="wzykind1">
        <p>余额</p>
        <p class="wzywhiffletree">{{ balance }}</p>
      </div>
      <div class="wzykind1">
        <p>当前存期</p>
        <p class="wzywhiffletree">定期</p>
      </div>
      <div class="wzykind1">
        <p>开户日期</p>
        <p class="wzywhiffletree">2023.05.30</p>
      </div>
      <div class="wzykind1">
        <p>到期日期</p>
        <p class="wzywhiffletree">2024.05.30</p>
      </div>
      <div class="wzykind2">
        <p>年利率</p>
        <!-- <input type="text" placeholder="请选择支取方式" />
        <img src="../assets/img/箭头4.png" alt="" /> -->
        <p class="wzywhiffletree">1.68%</p>
      </div>
    </div>

    <!-- 金额 -->
    <div class="wzyfigure">
      <div class="wzyfigure1">
        <a href="">转入金额</a>
      </div>
      <div class="wzyfigure2">
        <p>￥</p>
        <input type="text" placeholder="请输入转出金额" v-model="money" />
      </div>
    </div>
    <!-- 下一步 -->
    <button class="wzynext" @click="ok">下一步</button>
  </div>
</template>

<script>
import { regular, termly } from "../api/interrevolution2";
import { Dialog } from "vant";
export default {
  data() {
    return {
      balance: "",
      iccid: "",
      money: "",
    };
  },
  methods: {
    fun() {
      regular()
        .then((res) => {
          if (res.code == 200) {
            this.balance = res.data.accountBalance;
            console.log(this.balance);
            this.iccid = res.data.financingAccount;
          } else {
            Dialog({ title: "温馨提示", message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    ok() {
      termly({ money: this.money }).then((res) => {
        if (res.code == 200) {
          Dialog.alert({
            message: "转入成功",
          }).then(() => {
            this.$router.push({
              name: "interrevolution",
            });
          });
        } else {
          Dialog.alert({
            message: res.msg,
          }).then(() => {
            // on close
          });
        }
      });
    },
    gobanck() {
      this.$router.push({
        name: "interrevolution",
      });
    },
  },
  created() {
    this.fun();
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: rgb(247, 247, 247);
}
.wzyinterrevolution1 {
  width: 100%;
  height: 40px;
  background-color: rgb(255, 255, 255);
}
.wzyinterrevolution {
  height: 40px;
  width: 370px;
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.wzyinterrevolution img {
  height: 25px;
  width: 25px;
}
.wzyinterrevolution a {
  text-decoration: none;
  color: black;
  font-size: 17px;
  margin-left: 120px;
}
/* 交易 */
.wzyaccount {
  height: 40px;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
}
.wzyaccount1 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  border-bottom: 1px solid rgba(190, 186, 186, 0.359);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wzyaccount2 {
  display: flex;
  align-items: center;
}
.wzyaccount2 p {
  margin-right: 5px;
}
.wzyaccount2 img {
  height: 20px;
  width: 2 0px;
}
.wzykind {
  height: 203px;
  margin-top: 10px;
  background-color: rgb(255, 255, 255);
}
.wzykind1 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  border-bottom: 1px solid rgba(182, 179, 179, 0.492);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wzykind2 {
  height: 40px;
  width: 370px;
  margin: 0 auto;
  /* background-color: aquamarine; */
  border-bottom: 1px solid rgba(190, 186, 186, 0.447);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wzykind2 input {
  height: 40px;
  width: 95px;
  border: 0;
  outline: none;
  margin-left: 170px;
  /* margin-top: -1px; */
}
.wzykind2 img {
  height: 20px;
  width: 20px;
}
/* 金额 */
.wzyfigure {
  height: 91px;
  margin-top: 10px;
  background-color: white;
}
.wzyfigure1 {
  height: 40px;
  width: 370px;
  /* background-color: aqua; */
  margin-left: 10px;
  border-bottom: 1px solid rgba(204, 200, 200, 0.449);
}
.wzyfigure1 a {
  text-decoration: none;
  color: black;
  line-height: 40px;
  margin-left: 6px;
}
.wzyfigure2 {
  margin: 0 auto;
  width: 370px;
  display: flex;
  border-bottom: 1px solid rgba(204, 200, 200, 0.466);
}
.wzyfigure2 p {
  font-size: 30px;
  margin-top: 5px;
}
.wzyfigure2 input {
  border: 0;
  outline: none;
  height: 50px;
  font-size: 20px;
}
.wzynext {
  height: 50px;
  width: 370px;
  border-radius: 10px;
  background-color: rgb(255, 226, 168);
  margin-left: 10px;
  margin-top: 40px;
  border: 0;
  color: rgb(255, 255, 255);
  font-size: 20px;
}
</style>
